/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {
  AutoComplete,
  Button,
  DatePicker,
  Form,
  Input,
  InputNumber,
  notification,
  Popconfirm,
  Select,
  Switch,
  Table
} from 'antd';

import {FormField, FormLayout, ModalFooter, ModalView, SearchForm} from 'antd-extra';
import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';

import ViewTitle from "../../../components/ViewTitle";
import EditableTable from '../../../components/EditableTable';
import {validate} from "@babel/core/lib/config/validation/options";
import {title} from "mockjs/src/mock/random/text";

moment.locale('zh-cn');

@Form.create()
@connect(({
            tenant,
            global,
            dynamicLabel, vendor, customer,
            dic
          }) => ({...tenant, ...dic, ...dynamicLabel, ...global, ...vendor, ...customer}))
export default class ModalCreateOrEditItem extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'vendor/findMany',
      payload: {}
    });
    this.props.dispatch({
      type: 'customer/findMany',
      payload: {}
    });
  }

  renderFoot = () => {
    const {foot, value, record, callback, modalRef, form} = this.props;

    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            form.validateFields((err, values) => {

              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              values._code = record ? record._code : "FRO" + new Date().valueOf();
              const {customer, customerCode, vendor, vendorCode} = this.state;
              values.customer = customer;
              values.customerCode = customerCode;
              values.vendor = vendor;
              values.vendorCode = vendorCode;
              callback(values);
              modalRef.close();
            });

          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };
  getOpt = () => {
    const {customers = [], vendors = [], title} = this.props;
    const list = title === '收入' ? customers : vendors;

    return list.map(opt => (<Option key={opt.code} value={opt.name}>
        {opt.name}
      </Option>
    ));

  };
  onSelect = (value, option) => {
    const {form, cols, title, record = {}} = this.props;
    const {key, props} = option;
    const {label} = props;
    const _key = title === '收入' ? "customerCode" : "vendorCode";
    this.state[_key] = key;
    this.state[title === '收入' ? "customer" : "vendor"] = value;
  };

  render() {
    const {form, cols, title, record = {},} = this.props;
    const{customer, vendor}=record;
    const {customers = [], vendors = [], } = this.state;
    console.log('recorddd', record);
    const label = title === '收入' ? "客户" : "供应商";
    return (
      <div>
        <FormLayout form={form} cols={2}>
          {this.getDicFields(cols, record)}
          {title === '收入' ? <FormField
            label={label}
            name={'customer'}
            initialValue={customer}
          >
            <AutoComplete style={{width: '100%'}}
                          dataSource={this.getOpt(customers)}
                          allowClear
                          onSelect={this.onSelect}
            >
            </AutoComplete>
          </FormField> : <FormField
            label={label}
            name={'vendor'}
            initialValue={vendor}
          >
            <AutoComplete style={{width: '100%'}}
                          dataSource={this.getOpt(vendors)}
                          allowClear
                          onSelect={this.onSelect}
            >
            </AutoComplete>
          </FormField>}
        </FormLayout>
        {this.renderFoot()}
      </div>
    );
  }
}

